@extends('layouts.mobile')

@section('title', '购物车')

@section('content')
    <div class="cart">
        <form method="post" id="Form" action="{{url('mobile/auction/getorderinfo')}}">
            {{csrf_field()}}
            <div class="shop-item" v-for="shop in shops">
                <div class="shop">
                    <div class="checkwrap">
                        <input title="" type="checkbox" v-on:click="onClickShop(shop.shop_id)" :checked="shop.checked">
                    </div>
                    <div class="shop-name">@{{ shop.shop_name }}</div>
                </div>
                <div class="items">
                    <div class="item" v-for="item in shop.items">
                        <div class="checkwrap">
                            <input title="" type="checkbox" name="items[]" v-on:click="onClickItem(item.itemid)" :value="item.itemid" :checked="item.checked">
                        </div>
                        <div class="image bg-cover" :style="{'background-image':'url('+item.thumb+')'}"></div>
                        <div class="content">
                            <div class="title">@{{ item.title }}</div>
                            <div class="flex"></div>
                            <div class="bot">
                                <div class="price">￥@{{ item.price }}</div>
                                <div class="quantity-box">
                                    <div class="button" v-on:click="decrease(item.itemid)">-</div>
                                    <input title="" class="text" :value="item.quantity">
                                    <div class="button" v-on:click="increase(item.itemid)">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="maylike">猜你喜欢</div>
        @include('mobile.item.itemgridlist')
    </div>
    <div class="tabbar">
        <div class="bar">
            <div>
                <label style="padding: 15px; line-height: 1;">
                    <input style="vertical-align: bottom;" type="checkbox" v-on:click="checkall()" :checked="selectall">
                    <span>全选</span>
                </label>
            </div>
            <div class="order-fee">
                <span>总计:</span>
                <strong>@{{ totalFee }}</strong>
            </div>
            <div class="settlement" v-on:click="submit()">立即结算</div>
        </div>
    </div>
@stop

@section('foot')
    <script>var shops = @json($shops);</script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            totalFee:0.00,
            shops:shops,
            selectall:false
        },
        methods:{
            onClickShop:function (shop_id) {
                var self = this;
                shops.forEach(function (shop) {
                    if (shop.shop_id == shop_id){
                        shop.checked = !shop.checked;
                        shop.items.forEach(function (item) {
                            item.checked = shop.checked;
                            self.settlement();
                        });
                    }
                    //alert(JSON.stringify(shop));
                });
                this.shops = [];
                this.shops = shops;
            },
            onClickItem:function(itemid){
                var self = this;
                shops.forEach(function (shop) {
                    shop.items.forEach(function (item) {
                        if (item.itemid == itemid) {
                            item.checked = !item.checked;
                            self.settlement();
                        }
                    });
                });
                this.shops = [];
                this.shops = shops;
            },
            decrease:function (itemid) {
                var self = this;
                shops.forEach(function (shop) {
                    shop.items.forEach(function (item) {
                        if (itemid == item.itemid){
                            if (item.quantity > 1) {
                                item.quantity--;
                                self.settlement();
                                $.post('/cart/update_quantity',{itemid:itemid, quantity:item.quantity});
                            }
                        }
                    });
                    //alert(JSON.stringify(shop));
                });
                this.shops = [];
                this.shops = shops;
            },
            increase:function (itemid) {
                var self = this;
                shops.forEach(function (shop) {
                    shop.items.forEach(function (item) {
                        if (itemid == item.itemid){
                            item.quantity++;
                            self.settlement();
                            $.post('/cart/update_quantity',{itemid:itemid, quantity:item.quantity});
                        }
                    });
                    //alert(JSON.stringify(shop));
                });
                this.shops = [];
                this.shops = shops;
            },
            checkall:function(){
                var self = this;
                this.selectall = !this.selectall;
                shops.forEach(function (shop) {
                    shop.checked = self.selectall;
                    shop.items.forEach(function (item) {
                        item.checked = self.selectall;
                    });
                });
                this.settlement();
                this.shops = [];
                this.shops = shops;
            },
            settlement:function () {
                var totalFee = 0;
                shops.forEach(function (shop) {
                    shop.items.forEach(function (item) {
                        if (item.checked){
                            totalFee+= item.price*item.quantity;
                        }
                    });
                });
                this.totalFee = totalFee.toFixed(2);
            },
            submit:function () {
                if (this.totalFee == 0) {
                    DSXUI.showToast('请选择要结算的商品');
                    return false;
                } else {
                    $("#Form").submit();
                }
            }
        }
    });
</script>
@stop
